<template>
	<view class="content">
		<div style="height: 10px;"></div>
		<div style="margin: 20px auto;" class="width-90">
				<img :src="userInfo.headerUrl" class="header-image">
		</div>
		<div class="width-90" style="font-size: medium;font-weight: bold;">
			{{userInfo.nickName}}
		</div>
		<div class="width-90" style="font-size: small;margin-top: 20px; ">
			{{userInfo.country}} {{userInfo.province}} {{userInfo.city}}
		</div>
		<div class="width-90" style="font-size: small;font-weight: bold;;margin-top: 20px;">
			欢迎使用物联网卡管理系统！与我们合作是您的成功，与您相识是我们的幸运!
		</div>
		
		<div class="width-90 middle" >
			<div >
				<p class="top">{{dataNumbers[0]}}</p>
				<p class="bottom">移动</p>
			</div>
			<div>
				<p class="top">{{dataNumbers[1]}}</p>
				<p class="bottom">联通</p>
			</div>
			<div>
				<p class="top">{{dataNumbers[2]}}</p>
				<p class="bottom">电信</p>
			</div>
		</div>
		
		<button type="default" class="width-90" style="margin-top: 20px;background-color: white;" @click="clearCache">清除缓存</button>
		<button type="default" class="width-90" style="margin-top: 20px;background-color: white;" @click="gotoChangeCard">换卡记录</button>
		<button type="default" class="width-90" style="margin: 20px auto;background-color: white;" @click="gotoBalanceRechargeRecords">余额充值记录</button>
		<button type="default" class="width-90" style="margin: 20px auto;background-color: white;" @click="gotoExchangeFlow" v-if='showForUs'>兑换流量</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				operatorNumber:'/card/operatorNumber',
				getCustomerInfo:'/customer/getCustomerInfo',
				dataNumbers:[0,0,0],
				userInfo:{},
				showForUs: false,
			}
		},
		onLoad() {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			let local = location.href; 
			if(local.indexOf('192.168.1.107')>0||local.indexOf('//iot.1688iot.vip/')>0){
				this.showForUs = true;
			}
			this.initData()
			
		},
		methods: {
			 initData(){
				this.$req.userData(this.operatorNumber).then(v=>{
					this.dataNumbers = v.data
				})
				this.$req.userData(this.getCustomerInfo).then(v=>{
					this.userInfo = v.data
				})
			},
			gotoBalanceRechargeRecords(){
				uni.navigateTo({
					url: '/pages/balanceLog/balanceLog'
				});
			},
			gotoExchangeFlow(){
				uni.navigateTo({
					url: '/pages/exchangeFlow/index'
				});
			},
			gotoChangeCard(){
				uni.navigateTo({
					url: '/pages/changeLog/changeLog'
				})
			},
			clearCache(){
				uni.removeStorage({
					key: 'custoken',
					success: function(v) {
						uni.showToast({
							title:"操作成功！请刷新！",
							icon: 'none',
							duration: 3000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: calc(100vh - 47px) !important;
		background-color: $uni-bg-color-grey;
		overflow-y: scroll;
	}
	.header-image{
		border-radius: 20px;
		height: 80px;
		width: 80px;
	}
	.width-90{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.middle{
		display: flex;
		justify-content: space-between;
		font-size: small;
		margin-top: 20px;
		border-bottom: 1px solid #838e94;
		padding-bottom: 20px;
		div{
			width: 33%;
			text-align: center;
		}
		.top{
			font-weight: bold;
		}
		.bottom{
			color: #838e94;
		}
	}
</style>
